<template>
  <div class="ability-grid">
    <!-- 左上：综合能力评估 -->
    <div class="chart-box">
      <div class="chart-title">综合能力评估</div>
      <div ref="radarComprehensive" class="chart-content"></div>
    </div>
    <!-- 右上：能力变化趋势（综合） -->
    <div class="chart-box">
      <div class="chart-title">能力变化趋势</div>
      <div ref="lineComprehensive" class="chart-content"></div>
    </div>
    <!-- 左下：专业能力评估 -->
    <div class="chart-box">
      <div class="chart-title">专业能力评估</div>
      <div ref="radarProfessional" class="chart-content"></div>
    </div>
    <!-- 右下：能力变化趋势（专业） -->
    <div class="chart-box">
      <div class="chart-title">能力变化趋势</div>
      <div ref="lineProfessional" class="chart-content"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getComprehensiveAbilityList, getProfessionalAbilityList } from '@/api/example/ability'

export default {
  name: 'InterviewAbility',
  data() {
    return {
      radarDataComprehensive: [0, 0, 0, 0, 0, 0],
      radarDataComprehensiveLatest: [0, 0, 0, 0, 0, 0],
      radarIndicators: [
        { name: '语言表达能力', max: 100 },
        { name: '专业知识水平', max: 100 },
        { name: '应变抗压能力', max: 100 },
        { name: '技能匹配度', max: 100 },
        { name: '创新能力', max: 100 },
        { name: '逻辑思维能力', max: 100 }
      ],
      // 专业能力指标
      radarIndicatorsProfessional: [
        { name: '前沿知识与理论理解', max: 100 },
        { name: '解决问题能力', max: 100 },
        { name: '合作和沟通能力', max: 100 },
        { name: '项目经验', max: 100 },
        { name: '编程与工程', max: 100 },
        { name: '基础知识', max: 100 }
      ],
      radarDataProfessional: [0, 0, 0, 0, 0, 0],
      radarDataProfessionalLatest: [0, 0, 0, 0, 0, 0],
      trendLabels: [],
      trendDataProfessional: [0, 0, 0, 0, 0, 0],
      trendDataComprehensive: [0, 0, 0, 0, 0, 0]
    }
  },
  mounted() {
    this.fetchComprehensiveAbility()
    this.fetchProfessionalAbility()
  },
  methods: {
    // 综合能力
    fetchComprehensiveAbility() {
      getComprehensiveAbilityList({
        currentPage: 1,
        pageSize: 100,
      }).then(res => {
        const list = (res.data && res.data.list) ? res.data.list : []
        const abilityNames = this.radarIndicators.map(ind => ind.name)
        const abilityMap = {}
        abilityNames.forEach(name => { abilityMap[name] = [] })
        const timeSet = new Set()
        list.forEach(item => {
          timeSet.add(item.time)
          if (abilityMap[item.type]) {
            abilityMap[item.type].push({ time: item.time, score: Number(item.score) || 0 })
          }
        })
        // 平均分
        this.radarDataComprehensive = abilityNames.map(name => {
          const arr = abilityMap[name].map(i => i.score)
          if (!arr.length) return 0
          return Math.round(arr.reduce((a, b) => a + b, 0) / arr.length)
        })
        // 最近一次分数
        this.radarDataComprehensiveLatest = abilityNames.map(name => {
          const arr = abilityMap[name]
          if (!arr.length) return 0
          arr.sort((a, b) => new Date(b.time) - new Date(a.time))
          return arr[0].score
        })
        // 折线图：每种能力一条线，横坐标为time
        let timeList = Array.from(timeSet).sort((a, b) => new Date(a) - new Date(b))
        // 只保留最近十条
        if (timeList.length > 10) {
          timeList = timeList.slice(-10)
        }
        const colorList = ['#8d9fbd', '#a1b08b', '#e6ae7f', '#CECEEF', '#e9d981', '#e7abb0']
        const series = abilityNames.map((name, idx) => {
          const scoreMap = {}
          abilityMap[name].forEach(i => { scoreMap[i.time] = i.score })
          return {
            name,
            type: 'line',
            data: timeList.map(time => scoreMap[time] !== undefined ? scoreMap[time] : 0),
            smooth: true,
            lineStyle: { color: colorList[idx] },
            itemStyle: { color: colorList[idx] }
          }
        })
        this.initLineComprehensive(timeList, series)
        this.initRadarComprehensive()
      })
    },
    // 专业能力
    fetchProfessionalAbility() {
      getProfessionalAbilityList({
        currentPage: 1,
        pageSize: 100,
      }).then(res => {
        const list = (res.data && res.data.list) ? res.data.list : []
        const abilityNames = this.radarIndicatorsProfessional.map(ind => ind.name)
        const abilityMap = {}
        abilityNames.forEach(name => { abilityMap[name] = [] })
        const timeSet = new Set()
        list.forEach(item => {
          timeSet.add(item.time)
          if (abilityMap[item.type]) {
            abilityMap[item.type].push({ time: item.time, score: Number(item.score) || 0 })
          }
        })
        // 平均分
        this.radarDataProfessional = abilityNames.map(name => {
          const arr = abilityMap[name].map(i => i.score)
          if (!arr.length) return 0
          return Math.round(arr.reduce((a, b) => a + b, 0) / arr.length)
        })
        // 最近一次分数
        this.radarDataProfessionalLatest = abilityNames.map(name => {
          const arr = abilityMap[name]
          if (!arr.length) return 0
          arr.sort((a, b) => new Date(b.time) - new Date(a.time))
          return arr[0].score
        })
        // 折线图：每种能力一条线，横坐标为time
        let timeList = Array.from(timeSet).sort((a, b) => new Date(a) - new Date(b))
        // 只保留最近十条
        if (timeList.length > 10) {
          timeList = timeList.slice(-10)
        }
        this.trendLabels = timeList
        const series = abilityNames.map(name => {
          const scoreMap = {}
          abilityMap[name].forEach(i => { scoreMap[i.time] = i.score })
          return {
            name,
            type: 'line',
            data: timeList.map(time => scoreMap[time] !== undefined ? scoreMap[time] : 0),
          }
        })
        this.initLineProfessional(timeList, series)
        this.initRadarProfessional()
      })
    },
    // 综合能力评估雷达图
    initRadarComprehensive() {
      const chart = echarts.init(this.$refs.radarComprehensive)
      chart.setOption({
        tooltip: { show: true, backgroundColor: '#fff', borderColor: '#eee', textStyle: { color: '#444' } },
        radar: {
          indicator: this.radarIndicators,
          splitNumber: 4,
          radius: '70%',
          axisName: {
            color: '#666',
            fontWeight: 400,
            fontSize: 13,
            padding: [2, 4]
          },
          splitArea: {
            areaStyle: {
              color: ['#faf8f2', '#f5f5f5', '#fff']
            }
          },
          splitLine: {
            lineStyle: {
              color: '#e0e0e0',
              width: 1
            }
          },
          axisLine: {
            lineStyle: {
              color: '#e0e0e0',
              width: 1
            }
          }
        },
        legend: {
          data: ['平均分', '最近一次'],
          top: 20,
          right: 10,
          icon: 'circle',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: { color: '#888', fontWeight: 400, fontSize: 13 }
        },
        series: [
          {
            name: '平均分',
            type: 'radar',
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#bdbdbd',
              width: 2,
              type: 'dashed'
            },
            itemStyle: {
              color: '#bdbdbd',
              borderColor: '#fff',
              borderWidth: 1
            },
            areaStyle: {
              color: 'rgba(189,189,189,0.05)'
            },
            data: [
              { value: this.radarDataComprehensive, name: '平均分' }
            ]
          },
          {
            name: '最近一次',
            type: 'radar',
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#ffb347',
              width: 2,
              type: 'solid'
            },
            itemStyle: {
              color: '#ffb347',
              borderColor: '#fff',
              borderWidth: 1
            },
            areaStyle: {
              color: 'rgba(255,179,71,0.07)'
            },
            data: [
              { value: this.radarDataComprehensiveLatest, name: '最近一次' }
            ]
          }
        ]
      })
      this.radarComprehensiveChart = chart
    },
    // 综合能力变化趋势折线图
    initLineComprehensive(xAxisData = [], series = []) {
      const colorList = [
        '#ffe0b2', '#fff9c4', '#b3e5fc',
        '#c8e6c9', '#e1bee7', '#ffccbc'
      ];
      const chart = echarts.init(this.$refs.lineComprehensive)
      chart.setOption({
        tooltip: { trigger: 'axis', backgroundColor: '#fff', borderColor: '#eee', textStyle: { color: '#444' } },
        legend: {
          data: this.radarIndicators.map(i => i.name),
          top: '10px',
          right: '10px',
          icon: 'circle',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: { color: '#888', fontWeight: 400, fontSize: 13 }
        },
        grid: {
          left: '36px',
          right: '36px',
          top: '70px',
          bottom: '32px'
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          name: '',
          axisLine: { lineStyle: { color: '#e0e0e0', width: 1 } },
          axisLabel: {
            color: '#888',
            fontWeight: 400,
            fontSize: 13,
            margin: 8
          },
          splitLine: { show: false }
        },
        yAxis: {
          type: 'value',
          max: 100,
          axisLine: { lineStyle: { color: '#e0e0e0', width: 1 } },
          axisLabel: {
            color: '#888',
            fontWeight: 400,
            fontSize: 13
          },
          splitLine: { lineStyle: { color: '#f5f5f5', width: 1 } }
        },
        series: (series.length ? series : [{
          name: '综合能力',
          type: 'line',
          data: this.trendDataComprehensive,
        }]).map((s, idx) => ({
          ...s,
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            color: colorList[idx % colorList.length],
            width: 2
          },
          itemStyle: {
            color: colorList[idx % colorList.length],
            borderColor: '#fff',
            borderWidth: 1
          },
          areaStyle: {
            color: colorList[idx % colorList.length] + '22'
          }
        }))
      })
      this.lineComprehensiveChart = chart
    },
    // 专业能力评估雷达图
    initRadarProfessional() {
      const chart = echarts.init(this.$refs.radarProfessional)
      chart.setOption({
        tooltip: { show: true, backgroundColor: '#fff', borderColor: '#eee', textStyle: { color: '#444' } },
        radar: {
          indicator: this.radarIndicatorsProfessional,
          splitNumber: 4,
          radius: '70%',
          axisName: {
            color: '#666',
            fontWeight: 400,
            fontSize: 13,
            padding: [2, 4]
          },
          splitArea: {
            areaStyle: {
              color: ['#faf8f2', '#f5f5f5', '#fff']
            }
          },
          splitLine: {
            lineStyle: {
              color: '#e0e0e0',
              width: 1
            }
          },
          axisLine: {
            lineStyle: {
              color: '#e0e0e0',
              width: 1
            }
          }
        },
        legend: {
          data: ['平均分', '最近一次'],
          top: 20,
          right: 10,
          icon: 'circle',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: { color: '#888', fontWeight: 400, fontSize: 13 }
        },
        series: [
          {
            name: '平均分',
            type: 'radar',
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#bdbdbd',
              width: 2,
              type: 'dashed'
            },
            itemStyle: {
              color: '#bdbdbd',
              borderColor: '#fff',
              borderWidth: 1
            },
            areaStyle: {
              color: 'rgba(189,189,189,0.05)'
            },
            data: [
              { value: this.radarDataProfessional, name: '平均分' }
            ]
          },
          {
            name: '最近一次',
            type: 'radar',
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#ffb347',
              width: 2,
              type: 'solid'
            },
            itemStyle: {
              color: '#ffb347',
              borderColor: '#fff',
              borderWidth: 1
            },
            areaStyle: {
              color: 'rgba(255,179,71,0.07)'
            },
            data: [
              { value: this.radarDataProfessionalLatest, name: '最近一次' }
            ]
          }
        ]
      })
      this.radarProfessionalChart = chart
    },
    // 专业能力变化趋势折线图
    initLineProfessional(xAxisData = [], series = []) {
      const colorList = [
        '#ffe0b2', '#fff9c4', '#b3e5fc',
        '#c8e6c9', '#e1bee7', '#ffccbc'
      ];
      const chart = echarts.init(this.$refs.lineProfessional)
      chart.setOption({
        tooltip: { trigger: 'axis', backgroundColor: '#fff', borderColor: '#eee', textStyle: { color: '#444' } },
        legend: {
          data: this.radarIndicatorsProfessional.map(i => i.name),
          top: '10px',
          right: '10px',
          icon: 'circle',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: { color: '#888', fontWeight: 400, fontSize: 13 }
        },
        grid: {
          left: '36px',
          right: '36px',
          top: '70px',
          bottom: '32px'
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          name: '',
          axisLine: { lineStyle: { color: '#e0e0e0', width: 1 } },
          axisLabel: {
            color: '#888',
            fontWeight: 400,
            fontSize: 13,
            margin: 8
          },
          splitLine: { show: false }
        },
        yAxis: {
          type: 'value',
          max: 100,
          axisLine: { lineStyle: { color: '#e0e0e0', width: 1 } },
          axisLabel: {
            color: '#888',
            fontWeight: 400,
            fontSize: 13
          },
          splitLine: { lineStyle: { color: '#f5f5f5', width: 1 } }
        },
        series: (series.length ? series : [{
          name: '专业能力',
          type: 'line',
          data: this.trendDataProfessional,
        }]).map((s, idx) => ({
          ...s,
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            color: colorList[idx % colorList.length],
            width: 2
          },
          itemStyle: {
            color: colorList[idx % colorList.length],
            borderColor: '#fff',
            borderWidth: 1
          },
          areaStyle: {
            color: colorList[idx % colorList.length] + '22'
          }
        }))
      })
      this.lineProfessionalChart = chart
    }
  },
  beforeDestroy() {
    if (this.radarComprehensiveChart) this.radarComprehensiveChart.dispose()
    if (this.lineComprehensiveChart) this.lineComprehensiveChart.dispose()
    if (this.radarProfessionalChart) this.radarProfessionalChart.dispose()
    if (this.lineProfessionalChart) this.lineProfessionalChart.dispose()
  }
}
</script>

<style scoped>
.ability-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
  width: 100%;
  height: 700px;
  /* 拉长整体高度 */
  min-width: 600px;
  min-height: 500px;
}

.chart-box {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px #f0f1f2;
  padding: 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chart-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
}

.chart-content {
  flex: 1;
  width: 100%;
  height: 95%;
  /* 拉长折线图显示区域 */
}
</style>